import React from 'react'
import { Draggable, Droppable } from 'react-beautiful-dnd'
import './Task.less'

const Task = ({ tasks, title }) => {
  return (
    <div className="list-container">
      <span className="title">{ title }</span>
      <ul className="list-wrapper">
        <Droppable droppableId={ title }>
          {
            (provided, snapshot) => (
              <div
                ref={ provided.innerRef }
                { ...provided.droppableProps }
              >
                {
                  tasks.map((item, index) => {
                    // draggableId: 拖拽元素的唯一标识 必须是字符串
                    return <Draggable key={ item.id } draggableId={ item.id } index={ index }>
                      {
                        (provided, snapshot) => (
                          <div
                            { ...provided.dragHandleProps }
                            { ...provided.draggableProps }
                            ref={ provided.innerRef }
                          >
                            <li className="list-item">
                              <span className="item-title">{ item.title }</span>
                            </li>
                          </div>
                        )
                      }
                    </Draggable>
                  })
                }
                { provided.placeholder }
              </div>
            )
          }
        </Droppable>
      </ul>
    </div>
  )
}

export default Task
